<script setup lang='ts'>
//JS的写法
// defineProps(["GoodsList"])
// defineProps({
//     GoodsList:{
//         type:Array
//     }
// })

//TS的写法
defineProps<{
    GoodsList?: object[]
    //   bar?: number       //说bar这个父传子的,可以传,可以不传
}>()

//定义一个接口
// interface Props {
//     GoodsList: object[]
// }
// 实现了这个接口
// const { GoodsList } = defineProps<Props>()
</script>
<template>
    <div class="goodsList">
        <div class="goodsListItem" v-for="item in GoodsList" :key="(item as any).proid"
            @click="$router.push(`/detail/${(item as any).proid}`)">
            <img :src="(item as any).img1" alt="">
            <p>{{ (item as any).desc }}</p>
            <span>¥{{ (item as any).originprice }}</span>
        </div>
    </div>
</template>
<style scoped lang='scss'>
.goodsList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .goodsListItem {
        width: 45%;

        p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //多行在这里修改数字即可
            overflow: hidden;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
        }

        img {
            height: 300px;
        }

        span {
            color: red;
        }
    }

    &::after {
        content: "";
        display: block;
        width: 45%;
    }
}
</style>